const nums = document.querySelectorAll('.nums span');
const counter = document.querySelector('.counter');
const modal = document.querySelector('.modal');
const finalMessage = document.querySelector('.final');
const replay = document.getElementById('replay');
const start = document.getElementById('start');
var phone = "";
const $phone = document.querySelector('.phone');
const phoneNum = document.querySelector('.phoneNum');
const devUrl = 'http://dev.zhongxiangtianxia.cn/'
const carUrl = 'https://car.zhongxiangtianxia.cn/'
var startTime = 0;
var endTime = 0;
var flag = true;
var scratch = new Scratch({
    canvasId: 'js-scratch-canvas',
    imageBackground: './images/win.png',
    pictureOver: './images/foreground.png',
    // cursor: {
    //     png: './images/piece.png',
    //     cur: './images/piece.cur',
    //     x: '20',
    //     y: '17'
    // },
    radius: 20,
    nPoints: 100,
    percent: 50,
    sceneWidth: 360,
    callback: function () {
        // 全部刮完之后显示弹窗等待中奖结果， 但是这没显示出来
        finalMessage.classList.add('show');
        // flag为了防止多次提交
        if (flag) {
            flag = false;
            endTime = Date.parse(new Date())
            let url = carUrl + 'api/Meetingluckdraw/addMeetingUserData';
            let time = endTime - startTime;
            //这个回调里面将data传到后端 scene是场景值 每次重新开始扫码之后地址栏后面都会带上不同的场景值参数
            //point是全部刮完所用时间戳，username是用户名
            //这个ajax请求没法过去，不知道什么原因
            let data = {
                scene: getQueryString('scenekey'),
                point: time,
                username: phone
            }
            let callback = function (res) {
                if (res.code === 200) {
                    alert('已经完成，请关注大屏幕,等待幸运时刻的到来！');
                } else {
                    alert('抽奖失败！');
                }
            }
            $.post(url, data, callback)
        }
    },
    pointSize: {
        x: 3,
        y: 3
    }
});
// 倒计时321的动效
function resetDOM() {
    counter.classList.remove('hide');
    nums.forEach(num => {
        num.classList.value = '';
    });
    nums[0].classList.add('in');
}
// 倒计时321的动效
function runAnimation() {
    nums.forEach((num, idx) => {
        const penultimate = nums.length - 1;
        num.addEventListener('animationend', (e) => {
            if (e.animationName === 'goIn' && idx !== penultimate) {
                num.classList.remove('in');
                num.classList.add('out');
            } else if (e.animationName === 'goOut' && num.nextElementSibling) {
                num.nextElementSibling.classList.add('in');
            } else {
                counter.classList.add('hide');
                modal.classList.add('hide');

                startTime = Date.parse(new Date())
            }
        });
    });
}
// 获取地址后面的参数（待测试）
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
// 输入完用户名之后点击开始抽奖
start.addEventListener('click', () => {
    if (phoneNum.value) {
        phone = phoneNum.value
        $phone.classList.add('hide');
        resetDOM();
        runAnimation();
    }
})
// 弹出结果之后的确定事件
finalMessage.addEventListener('click', () => {
    finalMessage.classList.remove('show')
})